

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface ApprovalTask {
  id: string;
  title: string;
  applicant: string;
  department: string;
  time: string;
  currentNode: string;
  priority: 'high' | 'medium' | 'low';
  processId: string;
}

interface ApprovalTaskItemProps {
  task: ApprovalTask;
  isSelected: boolean;
  isBatchMode: boolean;
  onPress: () => void;
  onCheckboxToggle: () => void;
}

const ApprovalTaskItem: React.FC<ApprovalTaskItemProps> = ({
  task,
  isSelected,
  isBatchMode,
  onPress,
  onCheckboxToggle,
}) => {
  const getPriorityBadgeStyle = (priority: string) => {
    switch (priority) {
      case 'high':
        return styles.priorityHigh;
      case 'medium':
        return styles.priorityMedium;
      case 'low':
        return styles.priorityLow;
      default:
        return styles.priorityMedium;
    }
  };

  const getPriorityText = (priority: string) => {
    switch (priority) {
      case 'high':
        return '高';
      case 'medium':
        return '中';
      case 'low':
        return '低';
      default:
        return '中';
    }
  };

  const handleCheckboxPress = () => {
    onCheckboxToggle();
  };

  const handleItemPress = () => {
    if (isBatchMode) {
      onCheckboxToggle();
    } else {
      onPress();
    }
  };

  return (
    <TouchableOpacity
      style={[styles.container, isSelected && styles.selectedContainer]}
      onPress={handleItemPress}
      activeOpacity={0.7}
    >
      <LinearGradient
        colors={['#FFFFFF', '#F9FAFB']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.cardGradient}
      >
        <View style={styles.content}>
          {/* 复选框 */}
          <TouchableOpacity
            style={styles.checkboxContainer}
            onPress={handleCheckboxPress}
            activeOpacity={0.7}
          >
            <View style={[styles.checkbox, isSelected && styles.checkboxSelected]}>
              {isSelected && (
                <FontAwesome6 name="check" size={12} color="#FFFFFF" />
              )}
            </View>
          </TouchableOpacity>

          {/* 内容区域 */}
          <View style={styles.contentArea}>
            {/* 标题和优先级 */}
            <View style={styles.titleRow}>
              <Text style={styles.title} numberOfLines={1}>
                {task.title}
              </Text>
              <View style={[styles.priorityBadge, getPriorityBadgeStyle(task.priority)]}>
                <Text style={styles.priorityText}>
                  {getPriorityText(task.priority)}
                </Text>
              </View>
            </View>

            {/* 申请人信息 */}
            <Text style={styles.applicantInfo} numberOfLines={1}>
              申请人：{task.applicant} | {task.department}
            </Text>

            {/* 时间 */}
            <Text style={styles.timeInfo}>{task.time}</Text>

            {/* 当前节点和状态 */}
            <View style={styles.bottomRow}>
              <Text style={styles.currentNode} numberOfLines={1}>
                当前节点：{task.currentNode}
              </Text>
              <View style={styles.statusContainer}>
                <Text style={styles.statusText}>待审批</Text>
                {!isBatchMode && (
                  <FontAwesome6 name="chevron-right" size={12} color="#6B7280" />
                )}
              </View>
            </View>
          </View>
        </View>
      </LinearGradient>
    </TouchableOpacity>
  );
};

export default ApprovalTaskItem;

